<template>
  <div class="home">
    <div style="position: fixed;top: 0;left: 0;z-index: 100;width: 100%;">
      <!-- <titleCustom :title="$route.meta.title"></titleCustom> -->
      <div class="title">
        <div class="leftBack">
          <van-icon name="arrow-left" size="20" @click="onClickLeft" />
        </div>
        <div class="titleName">{{ $route.meta.title }}</div>
      </div>
    </div>
    <div class="chatListClass">
      <van-divider :style="{ color: '#8c8c8c', borderColor: '#5c5c5c', padding: '0 16px' }" style="font-size: 13px;">
        {{ callTime }}
      </van-divider>
      <div class="messageList" v-for="(item, index) in list" :key="index">
        <div class="messageLeft" v-if="item.side == '客户'">
          <div class="profileClass">
            <van-icon name="contact" size="25" color="#fff" />
          </div>
          <div class="messageItem" style="align-items: flex-start;">
            <div>客户{{ item.beginTimeStr }}</div>
            <div class="messageBorder">{{ item.text }}</div>
          </div>
        </div>
        <div class="messageRight" v-else>
          <div class="messageItem" style="align-items: flex-end;">
            <div>{{ item.beginTimeStr }} 坐席 </div>
            <div class="messageRightBorder">{{ item.text }}</div>
          </div>
          <div class="profileRightClass">
            <van-icon name="service" size="25" color="#fff" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Dialog, Notify, Toast } from 'vant'
import titleCustom from '@/components/titleCustom/title'
import aiccCallApi from '@/apiaicc/aiccCallApi'

export default {
  components: {
    titleCustom,
    Toast,
    Dialog,
    Notify
  },
  data() {
    return {
      list: [],
      billId: 0,
      billType: 0,
      callTime: "",
      backIndex: 0
    }
  },
  mounted() {
    if (this.$route.query) {
      this.billId = this.$route.query.billId
      this.billType = this.$route.query.billType
      if (this.$route.query.backIndex) {
        this.backIndex = parseInt(this.$route.query.backIndex)
      } else {
        this.backIndex = 0
      }

      this.getCallAsr()
    }
  },
  methods: {
    getCallAsr() {
      aiccCallApi.getCallAsr({
        id: this.billId,
        type: this.billType
      }).then((res) => {
        console.log(res);
        this.list = res.data.asr
        this.callTime = res.data.callTime
      })
    },
    onClickLeft() {
      if (this.backIndex != 0) {
        this.$route.params.backIndex = this.backIndex;
        this.$router.back()
      } else {
        if(this.backUrl==''||this.backUrl==null){
          this.$router.go(-1)
        }else{
          this.$router.push(this.backUrl)
        }
      }
    }
  }

}
</script>
<style scoped>
::v-deep body {
  background: #f5f6f9 !important;
}

.home {
  background-color: #ebedf0;
  //font-family: 'Alibaba';
  //height: calc(100vh - 60px);
  width: 100%;
  font-size: 14px;
  padding-top: 60px;
}
.title {
    height: 60px;
    background: url('~@/assets/images/taskbg.png') no-repeat center;
    font-size: 0.24rem;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .leftBack {
    position: absolute;
    left: 10px;
    line-height: 60px;
    color: #fff;
  }

  .titleName {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
  }

.chatListClass {
  width: 100%;
  min-height: calc(100vh - 60px);
  background-color: transparent;
  box-sizing: border-box;
  border: 1px solid transparent;
  padding-bottom: 20px;
}

.messageList {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;

}

.messageLeft {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.profileClass {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #FAAD14;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  margin-left: 2px;
}

.messageItem {
  color: #8C8C8C;
  font-size: 13px;
  display: flex;
  flex-direction: column;

}

.messageBorder {
  background-color: #d9e7ff;
  padding: 15px;
  max-width: 50vw;
  margin-top: 5px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #333;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
}

.messageRight {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 10px;
}

.messageRightBorder {
  background-color: #ffffff;
  padding: 15px;
  max-width: 50vw;
  margin-top: 5px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: #333;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
}

.profileRightClass {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #4385ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  margin-right: 2px;
}
</style>
